<!--
 * @Author: your name
 * @Date: 2021-09-10 10:25:53
 * @LastEditTime: 2021-10-21 13:59:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ant-design-vue-jeecge:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\views\finance-center\financial-view\index.vue
-->
<template>
  <div class="financial_container app_container">
		<div class="box_style fin_main">
			<div class="fin_main_title">
				可用余额
			</div>
			<div class="fin_main_options">
				<div class="fin_main_money">
					<div class="money_first">0</div>
					<div class="money_end">.00元</div>
				</div>
				<a-button type="primary">
					充值汇款
				</a-button>
				<a-button style="margin-left: 10px;">查看扣费</a-button>
				<span class="fin_main_s" style="margin-left: 20px;">提现</span>
				<a-divider type="vertical" />
				<span class="fin_main_s">对公汇款查询</span>
				<a-divider type="vertical" />
				<span class="fin_main_s">费用预警</span>
			</div>
			<div class="fin_main_options2">
				<div class="fin_main_item">
					<div>先进金额</div>
					<div class="money">0.00元</div>
				</div>
				<div class="fin_main_item">
					+
				</div>
				<div class="fin_main_item">
					<div>赠送金余额</div>
					<div class="money">0.00元</div>
				</div>
				<div class="fin_main_item">
					-
				</div>
				<div class="fin_main_item">
					<div>欠费金额</div>
					<div class="money">0.00元</div>
				</div>
				<div class="fin_main_item">
					-
				</div>
				<div class="fin_main_item">
					<div>冻结金额</div>
					<div class="money">0.00元</div>
				</div>
			</div>
		</div>
		<div class="box_style fin_middle">
			<div class="fin_middle_item">
				<div class="fin_middle_item_sub">代金券</div>
				<div class="fin_middle_item_sub">
					<span class="number">0</span>
					<span class="unit">张</span>
					<span class="unit" style="color: red;">（7日内到期0张）</span>
				</div>
				<div class="fin_middle_item_sub min_sub">使用代金券</div>
			</div>
			<div class="fin_middle_item">
				<div class="fin_middle_item_sub">可开发票金额</div>
				<div class="fin_middle_item_sub">
					<span class="number" style="margin-right: 0;">0</span>
					<span class="unit">.00 元</span>
				</div>
				<div class="fin_middle_item_sub min_sub">申请开票</div>
			</div>
			<div class="fin_middle_item">
				<div class="fin_middle_item_sub">有效合同</div>
				<div class="fin_middle_item_sub">
					<span class="number">0</span>
					<span class="unit">份</span>
				</div>
				<div class="fin_middle_item_sub min_sub">申请合同</div>
			</div>
		</div>
		<div class="box_style fin_bottom">
			<div class="fin_bottom_item">
				<div class="title">
					待支付订单（0）
				</div>
			</div>
			<div class="fin_bottom_item">
				<div class="title">
					30天内待续费资源（0）
				</div>
			</div>
			<div class="fin_bottom_item">
				<div class="title">
					月度资源账单
				</div>
				<div class="content">
					<!-- <div class="content_item">
						<div class="date">2021年07月</div>
						<div class="money">0.00元</div>
					</div>
					<div class="content_item">
						<div class="date">2021年07月</div>
						<div class="money">0.00元</div>
					</div>
					<div class="content_item">
						<div class="date">2021年07月</div>
						<div class="money">0.00元</div>
					</div>
					<div class="content_item">
						<div class="date">2021年07月</div>
						<div class="money">0.00元</div>
					</div> -->
				</div>
			</div>
		</div>
  </div>
</template>

<style lang="scss" scoped>
.financial_container {
	.fin_title {
		margin-bottom: 20px;
	}
	.fin_main {
		padding-bottom: 0;
		border-radius: 2px;
		.fin_main_title {
			color: #000;
			font-size: 16px;
			font-family: 600;
		}
		.fin_main_options {
			padding-top: 25px;
			padding-bottom: 30px;
			display: flex;
			align-items: center;
			.fin_main_money {
				display: flex;
				align-items: flex-end;
				margin-right: 30px;
				.money_first {
					color: #000;
					font-size: 28px;
					font-family: 600;
				}
				.money_end {
					color: #000;
					font-size: 16px;
					font-family: 600;
				}
			}
			.fin_main_s {
				font-size: 14px;
				color: #1890ff;
				cursor: pointer;
			}
		}
		.fin_main_options2 {
			height: 70px;
			background: #fafafa;
			margin: 0 -24px;
			border-top: 1px solid #f3f3f3;
			position: relative;
			display: flex;
			align-items: center;
			&::after {
				position: absolute;
				top: -24px;
				left: 50px;
				content: '';
				border: 12px solid transparent;
				width: 0;
				border-bottom-color: #f3f3f3;
			}
			.fin_main_item {
				font-size: 12px;
				line-height: 18px;
				.money {
					font-size: 14px;
					color: #000;
					font-family: 600;
				}
			}
			.fin_main_item:first-child {
				margin-left: 25px;
			}
			.fin_main_item:nth-child(2){
				margin: 0 50px;
			}
			.fin_main_item:nth-child(3), .fin_main_item:nth-child(4), .fin_main_item:nth-child(5), .fin_main_item:nth-child(6){
				margin: 0 50px 0 0;
			}
		}
	}
	.fin_middle {
		padding: 15px 24px;
		margin-top: 20px;
		border-radius: 2px;
		display: flex;
		align-items: center;
		.fin_middle_item {
			font-size: 12px;
			line-height: 20px;
			float: left;
			width: 33.33%;
			.fin_middle_item_sub {
				line-height: 40px;
				display: flex;
				align-items: flex-end;
				.number {
					font-size: 24px;
					color: #000;
					margin-right: 5px;
					line-height: 18px;
				}
				.unit {
					font-size: 12px;
					line-height: 12px;
				}
			}
			.min_sub {
				color: #1890ff;
				cursor: pointer;
			}
		}
	}
	.fin_bottom {
		padding: 0;
    margin-top: 20px;
    border-radius: 2px;
    background: transparent;
		display: flex;
		align-items: center;
		.fin_bottom_item {
			width: 32.5%;
			height: 300px;
			background: #fff;
			padding: 20px;
			.title {
				color: #000;
			}
			.content {
				padding-top: 20px;
				.content_item {
					margin-top: 5px;
					height: 40px;
					border-bottom: 1px solid #f4f4f4;
					.date {
						float: left;
						height: 40px;
						line-height: 40px;
					}
					.money {
						height: 40px;
						float: right;
						line-height: 40px;
					}
				}
			}
		}
		.fin_bottom_item:nth-child(2) {
			margin: 0 auto;
		}
	}
}
</style>